<template>
  <div class="header">
    <div class="header-left">
    	<span class="iconfont back-icon">&#xe624;</span>
    </div>
    <div class="header-input">
    	<span class="iconfont">&#xe632;</span>
    	输入城市景点(游戏主题)
    </div>
    <router-link class="header-right" tag="div" to="/city">
  		 {{this.city}}
  		<span class="iconfont arrow-icon">&#xe64a;</span>
    </router-link>
  	
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
 export default{
 	 name:"HomeHeader",
 	 computed:{
 	 	...mapState(['city'])
 	 	// ...mapGetters(['doubleCity'])
 	 }
 	 
 }
</script>

<style lang="less" scoped>
 @import '~styles/varibles.less';
	.header{
		display:flex;
		line-height: .86rem;
		height:.86rem;
		background:@bgColor;
		color:#fff;
	}
  .header-left
  {
  	width:.64rem;
		float:left;
		text-align: center;
		.back-icon{
			font-size: 0.4rem;
		}
  }
	.header-input
 		{
 			flex:1;
 			height: .64rem;
 			line-height: 0.64rem;
 			margin-top:.12rem;
 			margin-left:.2rem;
 			padding-left:.2rem;
 			background:#fff;
 			border-radius: .1rem;
 			color:#ccc;
 		}
	.header-right
		{
			min-width:1.04rem;
			padding:0.1rem;
			float:right;
			text-align: center;
			.arrow-icon{
				font-size:.24rem;
			}
		}

</style>
